<script setup>
import {onMounted} from "vue";
import IndexHeader from "@/components/IndexHeader.vue";
import IndexHeaderChannel from "@/views/index/components/IndexHeaderChannel.vue";
import IndexVideos from "@/views/index/components/IndexVideos.vue";
import VideoApi from "@/apis/VideoApi.js";



</script>

<template>
  <div class="indexBox">
    <IndexHeader></IndexHeader>
    <img class="headerImg" src="@/assets/indexBgImg.png" alt="">
    <IndexHeaderChannel></IndexHeaderChannel>
    <IndexVideos></IndexVideos>
  </div>
</template>

<style scoped lang="less">
.indexBox{
  width: 100%;
  min-width: 1120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  .headerImg{
    height: 155px;
    width: 100%;
    object-fit: cover;
    object-position: center 50%;
    filter: brightness(95%);
  }
}
</style>
